<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="hdpck">
      <p class="dwdsa">活动配餐 6月24日 10:00</p>
      <h6 class="divssad">待接单</h6>
      <div class="divsdsa">
        <h5 class="dad123ds">小夏呀中餐</h5>
        <p class="dad123">
          牛肉粉(1份)+狗不理包子(1份)+拉板牛肉(1份)+可乐(1份)
        </p>
        <p class="dsadss">山东龙科科技公司</p>
        <p class="dsadss2">倒计时自动退约：12:31</p>
      </div>

      <div>
        <img src="@/img/disds.png" alt="" class="imgdisds" />
        <div class="divdsad"><p class="dsawp">服务协议</p></div>
        <p class="dsawdp">在线付 ￥299</p>
        <button class="dsash">餐厅电话</button>

        <div class="dsadasa">
          <el-popconfirm title="这是一段内容确定删除吗？">
            <el-button slot="reference">删除预约</el-button>
          </el-popconfirm>
        </div>
      </div>

    </div>

     <div class="hdpck">
      <p class="dwdsa">活动配餐 6月24日 10:00</p>
      <h6 class="divssad">待接单</h6>
      <div class="divsdsa">
        <h5 class="dad123ds">小夏呀中餐</h5>
        <p class="dad123">
          牛肉粉(1份)+狗不理包子(1份)+拉板牛肉(1份)+可乐(1份)
        </p>
        <p class="dsadss">山东龙科科技公司</p>
        <p class="dsadss2">倒计时自动退约：12:31</p>
      </div>

      <div>
        <img src="@/img/disds.png" alt="" class="imgdisds" />
        <div class="divdsad"><p class="dsawp">服务协议</p></div>
        <p class="dsawdp">在线付 ￥299</p>
        <button class="dsash">餐厅电话</button>

        <div class="dsadasa">
          <el-popconfirm title="这是一段内容确定删除吗？">
            <el-button slot="reference">删除预约</el-button>
          </el-popconfirm>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {},
};
</script>

<style scoped>
.dsash {
  position: relative;
  left: 104px;
  top: -153px;
  display: inline-block;
  border: 1px solid #dcdfe6;
  color: #656566;
  height: 26px;
  width: 82px;
  background-color: #fff;
  border-radius: 44px;
}
.dsadasa {
  position: relative;
  top: -180px;
  left: 272px;
}
.el-button[data-v-69db0820] {
  display: inline-block;
  line-height: 0;
  background: #fff;
  color: #606266;
  font-size: 12px;
  border-radius: 44px;
}
.el-button {
  display: inline-block;
  border: 1px solid #dcdfe6;
  color: #656566;
  height: 26px;
  width: 82px;
}

.dsawdp {
  display: inline-block;
  position: relative;
  top: -246px;
  left: 268px;
  color: red;
  font-size: 13px;
}
.divdsad {
  height: 20px;
  width: 60px;
  background-color: #ff9700;
  position: relative;
  top: -224px;
  left: 117px;
}
.dsawp {
  font-size: 12px;
  color: rgb(245, 245, 245);
  text-align: center;
  line-height: 20px;
}
/* @import url(''); 引入css类 */
.dsadss2 {
  font-size: 12px;
  color: #d77a75;
  margin: 5px 0;
}
.dsadss {
  font-size: 14px;
}
.imgdisds {
  height: 95px;
    position: relative;
    top: -119px;
    left: 4px;
  /* border: 1px solid red; */
}
.dad123 {
  margin: 8px 0 5px 0;
  width: 300px;
  font-size: 14px;
  color: rgb(94, 95, 95);
  height: 50px;
}
.dad123ds {
  margin: 8px 0;
}
.divsdsa {
  margin: 0 0 0 30px;
}
.hdpck {
 height: 173px;
    box-shadow: 1px 1px 9px 5px #ddd9d96c;
    border-radius: 18px 18px 18px 18px;
    padding: 14px 0px 0 0px;
    margin: 16px 0;
    animation-duration: 0.6s;
    animation-name: animateLeftdsdds-data-v-1cf43034;
}
@keyframes animateLeftdsdds {
  0% {
    transform: translateY(220px);
  }
}
.divssad {
  display: inline-block;
  top: -19px;
  right: 141px;
  position: relative;
  color: #ff8956;
  float: right;
  border-radius: 8px 8px 8px 8px;
}
.dwdsa {
  font-size: 15px;
  margin: 1px 6px;
}
</style>